import React, { useState } from 'react'
import { AutoComplete } from 'antd'
const MyAutoComplete = () => {
  const [value, setValue] = useState('')
  const [options, setOptions] = useState([])
  const onChange = value => setValue(value)
  const onSearch = value => {
    const options = []
    for (let i = 0; i < 3; i++) {
      options.push({
        value: `${value}${i}`
      })
    }
    setOptions(options)
  }
  const onSelect = value => {
    console.log('onSelect: %s', value)
  }
  return (
    <>
      <div className="box">
        <div className="box-header">onChange&onSearch&受控组件</div>
        <div className="box-body">
          <div className="box-content">
            <AutoComplete style={{ width: '200px' }} value={value} options={options} onChange={onChange} onSearch={onSearch} onSelect={onSelect}></AutoComplete>
          </div>
        </div>
      </div>
    </>
  )
}
export default MyAutoComplete